*{
    padding:0;
    margin:0;
    box-sizing:border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
html,body {
    width:100%;
    height:100%;
}

ul {
    text-decoration: none;
}
ul li {
    list-style: none;
}
/*
  颜色
*/
.bg-light{
    background: #F1F1F1;
    padding:1px 0;
}
.bg-white{
    background: #FFF;
}
body{
    text-align:center;
    background: #F1F1F1;
}
.od-header {
    width:100%;
    display: flex;
    padding:12px 0;
    box-shadow: 0 4px 8px #F3F3F3;
}

.od-header>.brand{
    width:240px;
    margin-left:24px;
}
.od-header>.brand>.logo{
    font-family:STLiti;
    font-size:1.5rem;
    color:#9f4324;
}
.od-header>.brand>.desc {
    display: inline-block;
    font-family: STXingkai;
    color: #777;
    transform: skew(2deg) rotate(-3deg);
}
.od-header>.menu-list{
    flex:1;
}
.od-header>.menu-list>.menu-list-item {
    height:80px;
    width:80px;
    display: inline-block;
}
.od-body {
    width:1240px;
    height:720px;
    margin:auto;
    display: inline-block;
}
.aside-menu {
    width:320px;
    height:704px;
    overflow-y:scroll;
    background: #FFF;
    margin-top:16px;
    display: inline-block;
}
.aside-menu::-webkit-scrollbar{
    display: none;
}
.od-body>article.content {
    height:704px;
    width:880px;
    margin-left:35px;
    margin-top:16px;
    overflow-y:scroll;
    display: inline-block;
}
.od-body>article.content::-webkit-scrollbar{
    background-color:transparent;
}
.od-body>article.content .phonebar{
    width:375px;
    line-height: 0;
}
.od-body>article.content .phonebar img{
    width:100%;
}

.od-body>article.content #editor {
    width:375px;
    transform:scale(1,1);
    height:667px;
    padding-bottom:32px;
    background: #FFF;
    overflow-y: scroll;
}
.od-body>article.content #editor::-webkit-scrollbar{
    display: none;
}

.od-body>aside.views {
    width:240px;
    height:100%;
    overflow-y:scroll;
}
.od-body>aside.views::-webkit-scrollbar{
    display: none;
}

.od-footer {
    height:45px;
}
.clearfx:after{
    display: block;
    content:' ';
    height:0px;
    clear:both;
    zoom:1;
}
.newBtn{
    width:80%;
    margin:8px auto;
    padding:12px 0;
    background: #FFF;
    color:#777;
}
.content::-webkit-scrollbar{
    display: none;
}
.content .preview-viewer {
    width:400px;
    padding:24px 0;
    display: inline-block;
}
.content .databox{
    width:424px;
    height:667px;
    background: #FFF;
    display: inline-block;
    margin-left:32px;
    vertical-align: top;
}
.views-table{
    width:100%;
}
.od-tab {
    width:100%;
}
.views{
    background: #FFF;
}

.vm-view {
    display: none;
}
.preview{
    display: block;
    cursor:pointer;
}

#editor .show .vm-view {
    display: block;
}
#editor .preview{
    display: none;
}
.views table td {
    text-align:center;
    font-size:.8rem;
    border-bottom:solid 1px #F3F3F3;
    color:#777;
    padding:12px 0;
}
table.views-table tr th{
    border-bottom: solid 1px #EEE;
    padding:8px 0;
    color:#777;
}
#editor{
    text-align: left;
}
.draggable {
    position:relative;
}
.draggable .drag {
    position:absolute;
    top:-8px;
    right:3px;
    color:#D3D3D3;
}
.od-nav {

}
#editor .inline {
    display: inline-block;
}
.block {
    border:solid 1px #c34545;
}
.od-dialog{
    position:absolute;
    z-index:996;
    border:solid 1px #CECECE;
    -webkit-box-shadow: 0px 0px 8px #888;
    -moz-box-shadow: 0px 0px 8px #888;
    box-shadow: 0px 0px 8px #888;
    padding:0 12px;
    display: inline-block;
    background: #FFF;
    padding-bottom: 12px;
    height: 640px;
    margin-top:auto;
    margin-bottom:auto;
    bottom:0;
    top:0;
}
.od-dialog>.od-dialog-header{
    padding:8px;
    font-size:.8rem;
    border-bottom:solid 1px #AAA;
    position:relative;
    line-height: 24px;
}
.od-dialog>.od-dialog-header>.close {
    float:right;

}
.od-dialog>.od-dialog-content {
    width:100%;
    max-height:90%;
    overflow: scroll;
}
.od-dialog>.od-dialog-content::-webkit-scrollbar{
    display: none;
}
.od-dialog fieldset{
    border: solid 1px #D7D7D7;
    padding:8px;
}
.form-item {
    display: flex;
    border-bottom: solid 1px #CECECE;
    padding:8px 0;
}

.form-item label{
    width:96px;
    font-size:.8rem;
    text-align:right;
}
.style .form-item label{
    width:64px;
}
.form-item .form-input {
    flex:1;
    padding-left:8px;
}
.col input,.form-item .form-input input,.form-item .form-input select{
    border: none;
    outline:none;
    width:100%;
}
.row {
    width:100%;
}
.row .col5{
    width:50%;
    float:left;

}
.row .col5 .cols {
    display: flex;
}
.row .col5 .cols .col {
    flex:1;
    margin-left:8px;
}
.row:after {
    content: ' ';
    height:0;
    display: block;
    clear: both;
    zoom: 1;
}

.form-item .checkbox input[type=radio],.form-item .checkbox input[type=checkbox] {
    width: 0;
    height:0;
}
.form-item label.input-icon {
    width: auto;
}
input[type=radio]:checked + label.input-icon, input[type=checkbox]:checked + label.input-icon{
    color:#FF6347;
}
.form-item .checkbox {
    width: 32px;
    height:32px;
    display: inline-block;
}

#file .menu{
    background: #FFF;
    border:solid 1px #FCFCFC;
    box-shadow: 0 0 8px #EFEFEF;
    padding:8px 0;
    width: 90%;
    margin:12px auto;
    color:#9e9e9e;
    position:relative;
}
#file .menu .new:hover + .newFile{
    display: inline-block;

}
.newFile {
    position:absolute;
    display: none;
    width:96px;
    border:solid 1px #9e9e9e;
    top:12px;
    background: #FFFFFF;
    border-radius: 4px;
}
.newFile:hover{
    display: inline-block;
}
.newFile li{
    padding:4px 8px;
}
.newFile li:hover{
    background: #CECECE;
}
#filelist{
    text-align: left;
}
#filelist ul {
    margin-left:16px;
}
#filelist ul li {
    padding:8px 0;
    color:#3a3a3a;
}
#filelist ul li.active {
    color:#ff3300;
}

#filelist ul li i{
    margin-right:4px;
}
.sub-list>li.active{
    color:#ff5500;
}
.od-tabs{
    width:100%;
    height:100%;
}
.od-tabs::-webkit-scrollbar {
    display: none;
}
.od-tabs>.od-tabs-title{
    width:100%;
    color:#777;
    font-size: 1rem;
    display: flex;

}

.od-tabs>.od-tabs-title>.od-tab-title {
    flex:1;
    background: #FAFAFA;
    padding:16px 0;
    text-align: center;
}
.od-tabs>.od-tabs-title>.od-tab-title.sm{
    width:60px;
    font-size:.6rem;
}
.od-tabs>.od-tabs-title>.other{
    flex:1;
    border-bottom:solid 1px #9e9e9e;
}
.od-tabs>.od-tabs-title>.od-tab-title.active{
    background:#FFF;
    border-bottom:none;
    color:#FC9839;
}
.od-tabs>.od-tabs-title:after{
    content:' ';
    zoom:1;
    display: block;
    clear: both;
    height:0;
}
.od-tabs>.od-tab-content {
    flex:1;
    overflow:scroll;
}
.od-tabs>.od-tab-content::-webkit-scrollbar{
    display: none;
}
.od-tabs>.od-tab-content>.od-tab-content-item{
    width:100%;
    height:100%;
    display: none;
}
.od-tabs>.od-tab-content>.od-tab-content-item.active{
    display: block;
}

.procedure-node {
     box-shadow: 2px 2px 19px #aaa;
     -o-box-shadow: 2px 2px 19px #aaa;
     -webkit-box-shadow: 2px 2px 19px #aaa;
     -moz-box-shadow: 2px 2px 19px #aaa;
     -moz-border-radius: 0.5em;
     border-radius: 0.5em;
     filter: alpha(opacity=80);
     border: 1px solid #346789;
     text-align: center;
     z-index: 20;
     background-color: #eeeeef;
     color: black;
     font-size: 9pt;
     position:relative;
     margin:32px auto;
}
.procedure-node.radius {
    border-radius: 25em;
}
#procedurebox {
    background: #FFF;
    height:667px;
}
#procedure .procedure-node{
    width:80px;
    height:30px;
    line-height: 30px;
}
#procedurebox .procedure-node{
    width: 150px;
    min-height: 50px;
    padding:15px 0;
}

.procedure-node.diamond{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 50% 50% ;
    -moz-transform-origin: 50%  50% ;
    -ms-transform-origin: 50%  50%;
    -o-transform-origin: 50%  50%;
    transform-origin: 50%  50%;
}

.procedure-node.diamond>.rediamond {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
#procedure .procedure-node.diamond {
    height:80px;
    width:80px;
}
#procedure .procedure-node.diamond>.rediamond {
    height: 100%;
    width: 100%;
    line-height: 80px;
}
#procedurebox .procedure-node.diamond {
    width:100px;
    height:100px;
}
#procedurebox .procedure-node.diamond>.rediamond {
    height: 100%;
    width: 100%;
    line-height: 100px;
}
#procedure .procedure-node.circle {

    width:50px;
    height:50px;
    border-radius: 100%;
    line-height: 50px;
}
#procedure .procedure-node.subprocess,#procedurebox .procedure-node.subprocess  {
    padding:0;
    width:100px;
    height:50px;
    border-radius: 100%;
    line-height: 50px;
}

#procedurebox .procedure-node.circle {
    padding:0;
    width:50px;
    height:50px;
    border-radius: 100%;
    line-height: 50px;
}
.procedure-node .alt{
    position:absolute;
    right:-4px;
    top:-4px;
    opacity: .8;
}
.procedure-node.parallelogram{
    width:150px;
    height:50px;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -ms-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
}
.procedure-node:hover {
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #444;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
#procedure{
    padding-top:4px;
}
.jtk-endpoint-anchor {
    z-index:120;
}
.slot{
    border:solid 1px #F4A232;
    min-height: 36px;
    min-width:120px;
    width:100%;
}
.data-box-item{
    display: flex;
    border-bottom:solid 1px #EEE;
    padding:4px 0;
    vertical-align: middle;
}
.data-box-item .data-box-label{
    width:128px;
    padding:12px 8px;
    border-right:solid 1px #DEDEDE;
}
.data-box-item .data-box-value {
    padding:12px 8px;
    flex:1;
}
.data-box-item input {
    border:none;
    outline:none;
    width:100%;
}
.menu-box {
    flex:1;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
.menu-box .menu-item{
    width:80px;
    color:#FC9839;
    cursor:pointer;
}
.menu-box .wrap{
    flex:1;
}
.has {
    position:relative;
}
.has:hover ul{
    display: inline-block;
}
.has ul{
    display: none;
    text-decoration: none;
    position:absolute;
    z-index:996;
    left:0;
    top:45px;
    width:120px;
    border:solid 1px #CECECE;

    box-shadow: 0 0 12px #777;
}

.has ul li{
    list-style: none;
    cursor: pointer;
    background: #FFF;
}
.has ul li:hover {
    background:#777;
    color:#FFF;
}
.project-info {
    width:96px;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    color:#777;
    margin-right:32px;
    white-space: nowrap;
    font-size:.8rem;
    line-height:2rem;
}
